<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>后台登录</title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
<link rel="stylesheet" type="text/css" href="static/admin/css/login.css" />
<script src="js/jquery-2.0.3.js" type="text/javascript" charset="utf-8"></script>
<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>
	<div class="m-login-bg">
		<div class="m-login">
			<h3>后台系统登录</h3>
			<div class="m-login-warp">
				<form class="layui-form">
					<div class="layui-form-item">
						<input type="text" id="username" name="username" required
							lay-verify="required|username" placeholder="用户名"
							autocomplete="off" class="layui-input">
					</div>
					<div class="layui-form-item">
						<input type="password" id="userpwd" name="userpwd" required
							lay-verify="required|userpwd" placeholder="密码" autocomplete="off"
							class="layui-input">
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<input type="text" name="verity" required
								lay-verify="required|verity" 
								autocomplete="off" class="layui-input" value="4wa62z">

						</div>
						<div class="layui-inline">
							<img class="verifyImg"  src="imgs/yzm.jpg" />
						</div>
					</div>
					<div class="layui-form-item m-login-btn">
						<div class="layui-inline">
							<button class="layui-btn layui-btn-normal" lay-submit=""
								lay-filter="login">登录</button>
							<input type="hidden" id="op" name="op" value="login">
						</div>
						<div class="layui-inline">
							<button type="reset" class="layui-btn layui-btn-primary">取消</button>
						</div>
					</div>
				</form>
			</div>
			<p class="copyright">&copy; 2019-2020 by knowno</p>
		</div>
	</div>


	<script>
		layui.use([ 'form', 'layer' ], function() {
			var form = layui.form;
			var layer = layui.layer;

			//自定义验证规则
			form.verify({
				username : function(value, item) {
					//value：表单的值、item：表单的DOM对象
					if (!new RegExp("^(.+){4,18}$").test(value)) {
						return '用户名长度必须为4-18位'
					}
					if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$")
							.test(value)) {
						return '用户名不能有特殊字符';
					}
					if (/(^\_)|(\__)|(\_+$)/.test(value)) {
						return '用户名首尾不能出现下划线\'_\'';
					}
					if (/^\d+\d+\d$/.test(value)) {
						return '用户名不能全为数字';
					}
				},
				password : [ /^[\S]{6,18}$/, '密码必须6到12位，且不能出现空格' ],
				verity : [ /(.+){6}$/, '验证码必须是6位' ],

			});

			//监听提交
			form.on('submit(login)', function(data) {
				/*  layer.alert(JSON.stringify(data.field), {
					title: '最终的提交信息'
				},  */
				console.log(data.field);
				$.ajax({
					type : "POST",
					url : "LoginServlet",
					data : {
						username : $("#username").val(),
						userpwd : $("#userpwd").val(),
						op : $("#op").val()
					},
					success : function(data) {
						console.log(data);
						if (data.msg == "success") {
							if (data.obj != null) {
								layer.msg("登录成功！",{
									  icon: 1,
									  time: 2000, 
									  skin: 'layer-ext-moon'
									},function(){
										location.href="NewsTypeServlet?op=queryByPage"										
									});
								
								
							} else {
								layer.alert("登录失败，用户名或者密码错误");
							}
						}
					},
					error : function(msg) {
						console.log(msg);
					},
					dataType : "json"
				});

				return false;
			});

		});
	</script>
</body>

</html>